<!-- <template>
  <view class="charts-box">
    <qiun-data-charts type="column" :chartData="chartData" />
  </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      chartData: {},
	    };
	  },
	  onReady() {
	    this.getServerData();
	  },
	  methods: {
	    getServerData() {
	      //模拟从服务器获取数据时的延时
	      setTimeout(() => {
	        let res = {
	            categories: ["2016","2017","2018","2019","2020","2021"],
	            series: [
	              {
	                name: "目标值",
	                data: [35,36,31,33,13,34]
	              },
	              {
	                name: "完成量",
	                data: [18,27,21,24,6,28]
	              }
	            ]
	          };
	        this.chartData = JSON.parse(JSON.stringify(res));
	      }, 500);
	    },
	  }
	}
</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style> -->

<template>
	<view class="charts-box">
		<qiun-data-charts type="tarea" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['tarea'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 25, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						boundaryGap: "justify",
						format: "xAxisDemo2"
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							max: 80
						}]
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				}
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
								name: "时间轴1",
								data: [
									[10000, 55],
									[30000, 25],
									[50000, 55],
									[70000, 25],
									[90000, 55]
								]
							},
							{
								name: "时间轴2",
								data: [
									[0, 25],
									[20000, 55],
									[40000, 25],
									[60000, 55],
									[80000, 25]
								]
							},
							{
								name: "时间轴3",
								data: [
									[0, 55],
									[15000, 25],
									[30000, 55],
									[45000, 25],
									[60000, 55]
								]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>
